<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>库存管理</text>
		</view>
	</view>
  <view class="body">
  	<view class="container">
  		<view class="inp">
  		<input type="text" name="" id="" placeholder="搜索企业名称">
		<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/search.png" mode=""></image>
  		</view>
		<view class="heads">
			<view class="dj">
				<view class="imgsd">
					<view class="name">二七执法大队执法一中队</view>
				</view>
			</view>
		</view>
  	</view>
  </view>
  
  
  <!-- rentong -->
  <view class="bods">
	<view class="container">
		<view class="xontent">
			<view class="vcgh">
				<text class="one">共<text class="blue">16</text>个单为</text>
				<text class="two">(当前位置第<text class="blues">1</text>页)</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-container">
			<view class="box" v-for="(item,index) in data" @click="LimitedCompany">
				<view class="heass">
				<view class="image">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/gongsi.png" mode=""></image>
				</view>
				<view class="text">
				{{item.name}}
				</view>
				<view class="ghy">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiala.png" mode=""></image>
				</view>
				</view>
				<view class="bottom">
					<view class="naem"><text>法定代表人</text>:<text class="kki">{{item.legalRepresentative}}</text> </view>
					<view class="pelpo"><text>环保管理员</text>:<text class="kki">{{item.environmentalManager}}</text> </view>
					<view class="address"><text>地址</text>:<text class="kki">{{item.address}}</text></view>
				</view>
			</view>
		</scroll-view>
	
		
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

	var data = ref([
		  {
		    "name": "新密市某某有限公司",
		    "legalRepresentative": "马赞",
		    "environmentalManager": "李强",
		    "address": "郑州市二七区马寨镇某某街道12号301"
		  },
		  {
		    "name": "新密市宏达制造有限公司",
		    "legalRepresentative": "张伟",
		    "environmentalManager": "王芳",
		    "address": "郑州市中原区建设路科技园区8号楼"
		  },
		  {
		    "name": "新密市环保科技有限公司",
		    "legalRepresentative": "刘明",
		    "environmentalManager": "陈静",
		    "address": "郑州市管城区航海东路创新大厦B座"
		  },
		  {
		    "name": "新密市绿色能源有限公司",
		    "legalRepresentative": "赵刚",
		    "environmentalManager": "杨帆",
		    "address": "郑州市金水区花园路环保产业园区3号"
		  },
		  {
		    "name": "新密市新材料有限公司",
		    "legalRepresentative": "孙强",
		    "environmentalManager": "周婷",
		    "address": "郑州市惠济区开元路科技孵化园6栋"
		  },
		  {
		    "name": "新密市精密仪器有限公司",
		    "legalRepresentative": "钱勇",
		    "environmentalManager": "吴华",
		    "address": "郑州市上街区工业大道智能制造园12号"
		  }
	])
	function LimitedCompany () {
		uni.navigateTo({
			url:"/homePageOther/LimitedCompany/LimitedCompany"
		})
	}
	function back (){
		uni.navigateBack({
			delta:1
		})
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}
	
	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;
	
		image {
			width: 22rpx;
			height: 38rpx;
		}
	}
	
	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;
	
		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}
	
	.body {
		width: 100%;
		height: 100%;
		background-color: #f3f5f7;
		.container{
			width: 750rpx;
			height: 222rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			text-indent: 34rpx;
			.inp{
				width: 690rpx;
				height: 75rpx;
				background: #F7F7FE;
				border-radius: 38rpx;
				margin: 25rpx auto;
				color: #ABABBB;
				position: relative;
				display: flex;
				align-items: center;
				padding-left: 38rpx;
				input{
					flex: 1;
				}
				image{
					width: 30rpx;
					height: 31rpx;
					position: absolute;
					top: 23rpx;
					right: 45rpx;
				}
			}
			.heads{
				height: 200rpx;
				background-color: #FFFFFF;
				.dj{
					width: 690rpx;
					position: relative;
					// background-color: #0874FA;
					.imgsd{
						width: 501rpx;
						height: 75rpx;
						background-image: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/jibie.png");
					    background-size: cover;
					     background-repeat: no-repeat;
					    background-position: center;
						position: absolute;
						left: 27rpx;
						top: 0rpx;
						.name{
							// width: 303rpx;
							height: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #1D1D1D;
							line-height: 33rpx;
							position: absolute;
							top: 20rpx;
							left: 154rpx;
						}
					}
					
				}
			}
		}
	}   
	.scroll-container {
	  height: calc(100vh - 142rpx - 222rpx - 48rpx); /* 头部高度 + 搜索区域高度 + 顶部信息栏高度 */
	  overflow: auto;
	}
		.bods{
			width: 100vw;
			height: 100%;
			background: #F3F5F7;
			.container{
				width: 750rpx;
				overflow: hidden;
					.xontent{
						width: 750rpx;
						height: 23rpx;
						margin-top: 25rpx;
						position: relative;
						.vcgh{
					    width: 350rpx;
					     height: 23rpx;
						 font-family: Source Han Sans CN;
						 font-weight: 400;
						 font-size: 23rpx;
						 color: #333333;
						 line-height: 23rpx;
						 position: absolute;
						 left: 45rpx;
						 .two{
							 margin-left: 30rpx;
						 }
						 .blue{
							 color: #0874FA;
						 }
						 .blues{
							 color: #0874FA;
						 }
						
					}	
				}
			
			}
		}
		.box{
			width: 707rpx;
			height: 265rpx;
			border-radius: 14rpx;
			margin: 28rpx auto;
			background-color: #FFFFFF;
			overflow: hidden;
			.heass{
				width: 707rpx;
				height: 38rpx;
				margin-top: 30rpx;
				position: relative;
				.image{
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					left: 36rpx;
					image{
						width: 38rpx;
						height: 38rpx;
					}
				}
				.text{
					
					height: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #222222;
					line-height: 30rpx;
					position: absolute;
					left: 89rpx;
					top: 5rpx;
				}
				.ghy{
					width: 15rpx;
					height: 25rpx;
					position: absolute;
					left: 660rpx;
					image{
						width: 15rpx;
						height: 25rpx;
					}
				}
			}
			.bottom{
				width: 707rpx;
				height: 199rpx;
				position: relative;
				.naem{
					// width: 210rpx;
					height: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 24rpx;
					position: absolute;
					top: 40rpx;
					left: 42rpx;
				}
				.pelpo{
					height: 25rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 25rpx;
					position: absolute;
					top: 90rpx;
					left: 42rpx;
				}
				.address{
					height: 25rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 25rpx;
					position: absolute;
					top: 140rpx;
					left: 42rpx;
				}
			}
		}
		.kki{
			margin-left: 17rpx;
		}
</style>
